<template>
    <div>
        <lottieLoading v-if='showProgress' :class="fadeOut?'animated fadeOut':''"></lottieLoading>
        <el-container style="height: 100%;">
            <el-header class="el-header" :class="elm" style="z-index:1002;background: rgb(12, 12, 12);"
                :style='$pcShow?"":"padding: 0;"'>
                <Header></Header>
            </el-header>
            <!-- 视屏背景搜索条 -->
            <div style="width: 100%;height: 100vh;position: relative;"
                v-if='$route.path=="/" && $pcShow &&$config.common.showSearch'>
                <div class="video-container">
                    <div :style="fixStyle" class="filter"></div>
                    <video v-if='$config.common.showVideo' :style="fixStyle" loop class="fillWidth"
                        v-on:canplay="canplay" type="video/mp4" :src="randomSrc" muted>
                    </video>
                    <div class="poster hidden" v-if='!$config.common.showVideo'>
                        <img :style="fixStyle" :src="$config.url.randomImgUrl" alt="" ref='bgImg' style="object-fit: cover;">
                    </div>
                </div>

                <img :src="$config.common.indexLogo" alt="" class="logoImg">

                <div style="display:flex;align-items: center;justify-content: center;top: 42%; " class='logoImg'>
                    <i class="fa fa-angle-left fa-2x " style="color: #5faaff;cursor:pointer;margin-right: 10%;"
                        @click='randomBg()'></i>

                    <i class="fa fa-github-alt fa-lg " style="color:#9e35ff;cursor:pointer;margin-right: 10%;"
                        @click='window.location("https://github.com/DLHTX")'></i>
                    <i class="fa fa-wechat fa-lg " style="color: #3CB371;cursor:pointer;margin-right: 10%;"></i>
                    <i class="fa fa-google fa-lg " style="color: #5faaff;cursor:pointer;margin-right: 10%;"></i>

                    <i class="fa fa-angle-right fa-2x " style="color: #5faaff;cursor:pointer;margin-right: 10%;"
                        @click='randomBg()'></i>
                </div>

                <!-- <p class="logo_text" style="font-family:Cousine;"> {{$config.common.indexDescription}}</p> -->

                <div class='logoInput'>
                    <!-- <div class='seachType' style="position: absolute;top: -25px;color: white;">
                        <span style="padding: 4px 13px 13px 13px;cursor:pointer;user-select: none;" v-for="item in searchList" :key='item'
                            :style='searchType==item?"background: white;color: black;border-radius: 2px;":""'
                            @click='searchType=item'>{{item}}</span>
                    </div> -->
                    <i class="iconfont icon-sousuo"
                        style="float: left;height: 50px;line-height: 50px;margin-left: 10px;"></i>
                    <input type="text" placeholder="输入博客内容或者博客名" v-model='searchtxt' @keyup.enter='fnsearch'
                        v-if="searchType=='站内'">
                    <div class="searchBtn" @click='fnsearch' v-if="searchType=='站内'">
                        <i class='fa fa-search'></i>
                        搜索</div>
                </div>

                <div class='wave' :style='`background: url(${wave1Url})repeat-x;`'></div>
                <div class='wave2' :style='`background: url(${wave2Url})repeat-x;`'></div>
                <i class="fa fa-chevron-down downarrow" @click='srcollDown()'></i>
            </div>

            <!-- 移动端搜索样式 -->
            <div class='' v-if='$route.path=="/" && !$pcShow'
                style='position: absolute;top: 60px;width: 100%;left: 0;border: 0;background: #2b2b2b;height: 50px;'>
                <i class="iconfont icon-sousuo"
                    style="float: left;height: 50px;line-height: 50px;margin-left: 10px;color: white;"></i>
                <input type="text" placeholder="请在这里输入您想要的博客" v-model='searchtxt'
                    style='color: white; height: 94%;width: 60%;border: none;background:#2b2b2b;outline: none;display: inline;padding-left: 10px;'>
                <div class="searchBtn" @click='fnsearch'>搜索</div>
            </div>

            <!-- 视屏背景搜索条 -->
            <el-main style="padding:0;">
                <!-- 含有过渡动画的router -->
                <transition name="custom-classes-transition" :enter-active-class="enterAnimate">
                    <keep-alive include="blogList">
                        <router-view class="child-view" ref="routerView" :key='nowTime'></router-view>
                    </keep-alive>
                </transition>

                <upBtn ref="upBtn"></upBtn>
            </el-main>
            <el-footer>
                <Footer></Footer>
            </el-footer>
        </el-container>
    </div>

</template>

<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import upBtn from "../../components/upBtn/upBtn";
import blog from "../../api/blog";

export default {
    name: "index",
    components: {
        Header,
        Footer,
        upBtn
    },
    data() {
        return {
            wave1Url:require('../../assets/img/wave1.png'),
            wave2Url:require('../../assets/img/wave2.png'),
            showStyle: false,
            isRun: false,
            slogan: null,
            enterAnimate: "animated fadeIn",
            leaveAnimate: "animated fadeOut",
            isScroll: false,
            nowTime: '',
            top: 0,//滚动条位置
            elm: '',//收起动画
            fixStyle: '',
            vedioCanPlay: '',
            randomSrc: 's1',
            searchtxt: '',
            showProgress: false,
            fadeOut: false,//fadeout动画
            pcShow: true,
            searchList: ['站内', '谷歌', '百度', '必应', '淘宝', '知乎'],
            searchType: '站内',
        };
    },
    watch: {
        '$route': function (newUrl, oldUrl) {
            this.nowTime = new Date().getTime();
        },
    },
    mounted() {
        this.checkLogin();
        this.randomSrc = `${this.$config.url.indexVideoSrc}${Math.floor(Math.random() * 17 + 1)}.mp4`
        window.addEventListener('scroll', this.handleScroll, true);
        window.onresize = () => {
            const windowWidth = document.body.clientWidth
            const windowHeight = document.body.clientHeight
            const windowAspectRatio = windowHeight / windowWidth
            let videoWidth
            let videoHeight
            if (windowAspectRatio < 0.5625) {
                videoWidth = windowWidth
                videoHeight = videoWidth * 0.5625
                this.fixStyle = {
                    height: windowWidth * 0.5625 + 'px',
                    width: windowWidth + 'px',
                    'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                    'margin-left': 'initial'
                }
            } else {
                videoHeight = windowHeight
                videoWidth = videoHeight / 0.5625
                this.fixStyle = {
                    height: windowHeight + 'px',
                    width: windowHeight / 0.5625 + 'px',
                    'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                    'margin-bottom': 'initial'
                }
            }
        }
        window.onresize()
    },
    methods: {
        ...mapActions(["checkLogin", "getPermissions"]),
        showUpBtn() { },
        randomBg() {
            console.log(this.$config.url.randomImgUrl)
            this.$refs.bgImg.src = 'http://www.dlhtx.top:3000/file/randomBg1'
            this.$refs.bgImg.src = 'http://www.dlhtx.top:3000/file/randomBg'
            console.log(this.$refs.bgImg.src)
        },
        canplay() {
            this.vedioCanPlay = true
        },
        srcollDown() {
            this.scrollAnimation(0, 1100)
        },
        scrollAnimation(currentY, targetY) {
            // 获取当前位置方法
            // const currentY = document.documentElement.scrollTop || document.body.scrollTop

            // 计算需要移动的距离
            let needScrollTop = targetY - currentY
            let _currentY = currentY
            setTimeout(() => {
                // 一次调用滑动帧数，每次调用会不一样
                const dist = Math.ceil(needScrollTop / 10)
                _currentY += dist
                window.scrollTo(_currentY, currentY)
                // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
                if (needScrollTop > 10 || needScrollTop < -10) {
                    this.scrollAnimation(_currentY, targetY)
                } else {
                    window.scrollTo(_currentY, targetY)
                }
            }, 1)
        },
        handleScroll() {
            // 页面滚动距顶部距离
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
                document.body.scrollTop
            var scroll = scrollTop - this.i;
            this.i = scrollTop;
            if (scroll < 0) {
                this.elm = 'scrollToDown'
            } else {//向下滚动 收起来
                this.elm = 'scrollToTop'
            }
        },
        async fnsearch() {
            switch (this.searchType) {
                case '站内':
                    let res = await blog.searchBlogbyTitleAndBody(this.searchtxt, 1, 6)
                    if (res.data != '') {
                        this.$router.push({ path: '/searchBlog', query: { searchtxt: this.searchtxt } })
                    } else {
                        this.$message('没有搜索到相关内容')
                    }
                case '百度':
                    window.open(`https://www.baidu.com/s?wd=${this.searchtxt}`)
                case '谷歌':
                    window.open(`https://www.google.com/search?q=${this.searchtxt}`)
                case '必应':
                    window.open(` https://cn.bing.com/search?q=${this.searchtxt}`)
                    break;
                case '淘宝':
                    window.open(` https://s.taobao.com/search?q=${this.searchtxt}`)
                    break;
                case '知乎':
                    window.open(` https://www.zhihu.com/search?type=content&q=${this.searchtxt}`)
                    break;


            }
        }
    },
    computed: {
        ...mapGetters([
            'isLogin',
            'user',
            'progress'
        ]),
    },
    watch: {
        progress(e) {
            if (e.show) {
                this.fadeOut = false
                this.showProgress = true
            } else {
                this.fadeOut = true
                setTimeout(() => {//在500毫秒之前播放fadeout动画
                    this.showProgress = false
                    this.fadeOut = false
                }, 500)
            }
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/common.less";
@import "../../assets/css/animate.css";
@keyframes wave1{
    0% {
        left:-236px
    }
    50%{
        left:-800px;
    }
    100%{
        left:-236px
    }
}
@keyframes wave2{
    0% {
        left:0
    }
    50%{
        left:800px
    }
    100%{
        left:0
    }
}
.wave {
    height: 65px;
    position: absolute;
    bottom: 0;
    width: 1000%;
    left: -236px;
    z-index: 5;
    opacity: 1;
    transition-property: opacity, bottom;
    transition-duration: 0.4s, 0.4s;
    animation: 50s wave1 infinite;
}
.wave2 {
    width: auto;
    height: 80px;
    // background: url("http://www.dlhtx.top:3000/img/wave2.png")repeat-x;
    position: absolute;
    bottom: 0;
    width: 1000%;
    left: 0;
    z-index: 4;
    opacity: 1;
    transition-property: opacity, bottom;
    transition-duration: 0.4s, 0.4s;
    animation: 66s wave1 infinite;
}
.downarrow {
    position: absolute;
    z-index: 999;
    width: 100px;
    left: 50%;
    -webkit-transform: translateX(-150px);
    transform: translateX(-50px);
    top: 84%;
    text-align: center;
    color: white;
    font-size: 3rem;
    animation: breath 2s infinite;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
        color: #f3c32a !important;
        transition: all 0.3s;
    }
}
@keyframes breath {
    0% {
        opacity: 1;
        top: 84%;
    }
    50% {
        opacity: 0.3;
        top: 86%;
    }
    100% {
        opacity: 1;
        top: 84%;
    }
}
.video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    // filter: blur(5px);
}

.video-container .poster img,
.video-container video {
    z-index: 0;
    position: absolute;
    filter: blur(5px);
}

.video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    background-image: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/dot.gif);
}
.el-header {
    transition: all 0.3s;
}
.el-footer {
    height: auto !important;
    background: rgb(46, 48, 51);
    color: white;
    padding: 2vh;
}
.scrollToTop {
    animation-name: scroll;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
.scrollToDown {
    animation-name: scrollDown;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
@keyframes scroll {
    0% {
        top: 0;
    }
    100% {
        top: -70px;
    }
}
@keyframes scrollDown {
    0% {
        top: -70px;
    }
    100% {
        top: 0;
    }
}
.logoImg {
    position: absolute;
    z-index: 999;
    width: 400px;
    left: 50%;
    transform: translateX(-200px);
    top: 23%;
}
.logo_text {
    position: absolute;
    z-index: 999;
    width: 1000px;
    left: 50%;
    -webkit-transform: translateX(-150px);
    transform: translateX(-500px);
    top: 38%;
    text-align: center;
    color: white;
    font-size: 2rem;
}
.logoInput {
    width: 700px;
    background: white;
    height: 50px;
    border-radius: 5px;
    position: absolute;
    z-index: 999;
    left: 50%;
    transform: translateX(-350px);
    top: 55%;
}
.logoInput input {
    height: 99%;
    width: 60%;
    border: none;
    background: #ff000000;
    outline: none;
    display: inline;
    padding-left: 10px;
}
.searchBtn {
    float: right;
    height: 50px;
    line-height: 50px;
    width: 74px;
    background: #232323;
    text-align: center;
    color: white;
    border-radius: 0 4px 4px 0;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
        background: #505050;
        transition: all 0.3s;
        width: 84px;
    }
}
</style>